<template>
  <el-tooltip effect="dark"
              :content="judge.msg || ''"
              :disabled="!judge.disabled"
              :open-delay="300"
              popper-class="btn_tooltip"
              placement="bottom">
    <div class="disabled_btn_wrapper">
      <el-button :type="btnType" :disabled="judge.disabled" @click="clickCallBack">
        <i :class="iconClass"></i>
        {{btnText}}
      </el-button>
    </div>
  </el-tooltip>
</template>

<script>
/**
 * @author 唐佳
 * @description 功能按钮禁用时气泡提示
 * @vue-prop {Object}[judge = {msg: '', disable: boolean}] judge 气泡提示和按钮状态
 * @vue-prop {String} btnText 按钮文字
 * @vue-prop {String} iconClass 按钮图标
 * @vue-prop {String} btnType 按钮类型
 * @vue-event judgeClick 点击回调
 */
export default {
  name: 'DisabledBtn',
  props: {
    judge: {
      require: true,
      type: Object,
    },
    btnText: {
      require: true
    },
    iconClass: {
      default: ''
    },
    btnType: {}
  },
  methods: {
    clickCallBack() {
      if (this.judge.msg === false) {
        this.$emit('judgeClick')
      } else if (!this.judge.disabled) {
        this.$message({
          type: 'error',
          message: this.judge.msg,
          duration: 1500,
          center: true,
        })
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
